<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>登录页</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css" />
<style>
	*{
		margin: 0;
		padding: 0;
	}
	input[type="tel"] {
		    border: none;
		    background: none;
		    border-radius: 0;
		    box-shadow: none;
		    display: block;
		    padding: 0;
		    width: 100%;
		    color: #4C4C4C;
		    font-size: 1.2rem;
		    font-family: inherit;
		    box-sizing: border-box;
		    -webkit-user-select: text;
		    user-select: text;
		    appearance: none;
		    -webkit-appearance: none;
		}
		input[type="password"],input[type="text"] {
		    border: none;
		    background: none;
		    border-radius: 0;
		    box-shadow: none;
		    display: block;
		    padding: 0;
		    width: 100%;
		    color: #4C4C4C;
		    font-size: 1.2rem;
		    font-family: inherit;
		    box-sizing: border-box;
		    -webkit-user-select: text;
		    user-select: text;
		    appearance: none;
		    -webkit-appearance: none;
		    letter-spacing: 1px;
		}
        #myCanvas{
        	/*box-shadow: 3px 1px 70px -22px #fff inset,3px 1px 70px -22px #fff ;*/
            background-color: #272e3d;
		   
		    overflow: hidden;
		    border-radius: 385px;
        }
        .canvas1 {
		    position: absolute;
		    margin: 0px auto;
		    top: 50%;
		    left: 50%;
		    margin-top: -385px;
		    margin-left: -385px;
		    z-index: -1;
    	}
    	.mainBox{
    		width: 500px;
		    height: 500px;
		    text-align: center;
		    position: absolute;
		    margin: 0px auto;
		    top: 50%;
		    left: 50%;
		    margin-top: -310px;
		    margin-left: -250px;
    	}
        .logoBox{
        	position: absolute;
        	width:100%;
        	height:70px;
        	top:18%;
        	left:0;
        	margin-top: -35px;
        }
        .logoBox img{
    	    vertical-align: bottom;
			width: 37%;
        }
        .dataT{
        	font-size:50px;
        	color: #fff;
        }
        .loginBox{
        	
        	padding-left:20px;
        	padding-right:20px ;
    	    width:450px;
		    height: 350px;
		    position: absolute;
		    left: 50%;
		    margin-left: -227px;
		    top: 50%;
		    margin-top: -100px;
		    border-radius: 5px;
		    background: #fff;
        }
        .loginBox h5{
        	margin-top: 35px;
        }
        .loginBox input{
		    width:90%;
		    background: none;
		    font-size: 20px;
		    height: 4rem;
		    display: block;
		    border-bottom: 1px solid #bcbcbc;
		    padding-right: 66px;
		    padding-top: 15px;
    		padding-left: 9px;
		    outline: medium;
		    color: #a0a0a0;
		    margin: 0 auto;
	 
        }

        .loginBox button{
        	width: 90%;
		    background: #434a5f;
		    border-radius: 5px;
		    height: 3.5rem;
		    margin-top: 1.7rem;
		    border: none;
		    font-size: 25px;
		    text-align: center;
		    color: #fff;
        }
        .loginBox div{
        	position: relative;
        	top: 0;
        }
        .loginBox div span{
        	position: absolute;
        	right: 10%;
        	top: 44%;
        }
        .loginBox p{
        	padding-top: 30px;
        }
        .loginBox input:nth-child(1){
        	margin-top: 3%;
        }
</style>
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
		<div class="container demo-1">
			<div class="content">
				<div id="large-header" class="large-header">
					<canvas id="demo-canvas"></canvas>
					<div class="mainBox">
				    	<div class="logoBox">
				    		<img src="img/yinglogo.png" alt="" />
				    		<span class="dataT">数据挖掘系统</span>
				    	</div>
				    	<div class="loginBox">
				    		<h5></h5>
				    		<input type="tel" maxlength="16" id="tel" placeholder="帐号"/>
				    		<div>
					    		<input type="password" maxlength="16" id="password" placeholder="密码"/><br />
					    		<span class="invisible"><img src="img/bi.png"></span>
				    		</div>
				    		<button>登录</button>
				    	    <p style="color:#C0C0C0;">忘记密码，请联系北研产品经理梁益双，QQ:746045013</p>
				    	</div>
				    	
				    </div>
				</div>
				<!--<nav class="codrops-demos">
					<a class="current-demo" href="index.html">Demo 1</a>
				</nav>-->
			</div>
		</div><!-- /container -->
		<script type="text/javascript" src="js/base/ajax.js"></script>
        <script type="text/javascript" src="js/base/yingSoftPrg.js"></script>
		<script src="js/riqi/jquery-1.8.3.min.js"></script>
		<script src="js/TweenLite.min.js"></script>
		<script src="js/EasePack.min.js"></script>
		<script src="js/rAF.js"></script>
		<script src="js/demo-1.js"></script>
		
	</body>
	<script>
		if(localStorage.getItem('loginVouche')){
			window.location.href="index.html";
	    }
		$('button').click(function(){
		    var url = '/api/yt_ksbao/login';
		    var data={
		        'userName':$('#tel').val(),
		        'password':$('#password').val()
		    }
	     	var success = function(json) {
			var jsonData = JSON.parse(json);
				if(jsonData.status == 200) {
					localStorage.setItem('loginVouche',true)
				     window.location.href="index.html";
				}else{
				    $('.loginBox p').html("*账号或密码不正确").css({'color':'red'});
			    }
			}
		    G_AjaxApi_test.post(url, data, true, success);
		})
		$("input").keydown(function(){
		    $('.loginBox p').html("忘记密码，请联系北研产品经理梁益双，QQ:746045013").css({'color':'#C0C0C0'});
		});
	   var passwordeye = $('.loginBox span');
	   var showPwd = $("#password");
	   passwordeye.off('click').on('click',function(){
		   if(passwordeye.hasClass('invisible')){
		       passwordeye.removeClass('invisible').addClass('visible');//密码可见
		       showPwd.prop('type','text');
		       passwordeye.find('img').attr('src','img/kai.png')
		   }else{
		       passwordeye.removeClass('visible').addClass('invisible');//密码不可见
		       showPwd.prop('type','password');
		       passwordeye.find('img').attr('src','img/bi.png')
		    };
	   });     
	</script>
</html>
